<template>
  <div class="timely-rate">
    <el-tabs type="border-card">
      <el-tab-pane label="主体">
        <div class="search-header">
          <el-select
            v-model="selectBusinessDivisions"
            filterable
            multiple
            size="mini"
            placeholder="请选择"
            @change="selectChangeHandle"
          >
            <el-option
              v-for="item in businessDivisions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-checkbox v-model="queryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
          <!--      <header-select tree-type="dept" @selectDept="getDept" />-->
          <!--<el-date-picker
            v-model="dateRangeValue"
            size="mini"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dataChange"
          />-->
          <div class="oprate-btn">
            <el-button size="mini" type="primary" icon="el-icon-search" :loading="loading" @click="query">查询</el-button>
            <el-button size="mini" type="primary" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
          </div>
        </div>
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中..."
          :data="table"
          :span-method="objectSpanMethod"
          border
          size="mini"
          height="calc(100vh - 250px)"
        >
          <el-table-column
            prop="deptName"
            label="事业部"
            min-width="80"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.deptName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="最新项目名称"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.projectName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="buildingName" label="楼栋" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.buildingName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="checkTableName" label="工序" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.checkTableName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalFloor" label="总层数/栋" align="center" min-width="80">
            <template slot-scope="scope">
              <span><a class="table-href" href="javascript:void(0);" @click="getCheckStateDialog(scope.row.buildingId, scope.row.checkTableId)">{{ scope.row.totalFloor.value }}</a></span>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionFloor" label="已报验层/栋" align="center" min-width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.inspectionFloor.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="acceptanceFloor" label="已验收层/栋" align="center" min-width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.acceptanceFloor.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeBatch" label="已报验批次" align="center" min-width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.inspectionBatch.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeBatch" label="已完成验收批次" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.completeBatch.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="timelyBatch" label="及时完成验收批次" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.timelyBatch.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstInspectionTime" label="第一次报验时间" align="center" min-width="140">
            <template slot-scope="scope">
              <span>{{ scope.row.firstInspectionTime.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastInspectionTime" label="最新批次报验时间" align="center" min-width="140">
            <template slot-scope="scope">
              <span>{{ scope.row.lastInspectionTime.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户" align="center" min-width="80" />
          <el-table-column prop="roleName" label="角色" align="center" min-width="180" />
          <el-table-column prop="firstAcceptanceTime" label="第一次验收时间" align="center" min-width="140" />
          <el-table-column prop="lastAcceptanceTime" label="最新验收时间" align="center" min-width="140" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="基础">
        <div class="search-header">
          <el-select
            v-model="beExecuteState.deptIds"
            multiple
            size="mini"
            placeholder="请选择"
            @change="selectChangeHandle"
          >
            <el-option
              v-for="item in businessDivisions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-checkbox v-model="beExecuteState.isOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
          <!--      <header-select tree-type="dept" @selectDept="getDept" />-->
          <!--<el-date-picker
            v-model="dateRangeValue"
            size="mini"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dataChange"
          />-->
          <div class="oprate-btn">
            <el-button size="mini" type="primary" icon="el-icon-search" :loading="loading" @click="queryBeExecute">查询</el-button>
            <el-button size="mini" type="primary" icon="el-icon-download" :loading="fileLoading" @click="downloadBeFile">下载</el-button>
          </div>
        </div>
        <el-table
          v-loading="beExecuteState.loading"
          element-loading-text="拼命加载中..."
          :data="beExecuteState.data"
          :span-method="objectSpanMethod"
          border
          size="mini"
          height="calc(100vh - 250px)"
        >
          <el-table-column
            prop="deptName"
            label="事业部"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.deptName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="最新项目名称"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.projectName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="buildingName" label="楼栋" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.buildingName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="checkTableName" label="工序" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.checkTableName.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="batchNum" label="已报验批次数" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.batchNum.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inspectCount" label="已报验空间数" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.inspectCount.value }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户" align="center" min-width="100" />
          <el-table-column prop="roleName" label="角色" align="center" min-width="140" />
          <el-table-column prop="checkNum" label="已完成空间数" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.checkNum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="timelyCheckNum" label="及时完成空间数" align="center" min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.timelyCheckNum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstCheck" label="第一次验收时间" align="center" min-width="120" />
          <el-table-column prop="lastCheck" label="最新验收时间" align="center" min-width="120" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 查看验收平面图 -->
    <el-dialog title="验收情况" :visible.sync="checkState.dialogVisible">
      <div style="max-height: 600px;overflow: auto">
        <check-state-area :building-id="checkState.buildingId" :check-table-id="checkState.checkTableId" :is-edit="false" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getKeyProcessExecution, downloadProcessExecuteExcel, getBeKeyProcessExecution, downloadBeProcessExecuteExcel } from '@/api/statement/keyProcessCheck'
import { getBusinessDivision } from '@/api/common'
import CheckStateArea from '../components/CheckStateArea'
// import { parseTime } from '@/utils/common'
export default {
  name: 'ExecuteCondition',
  components: {
    CheckStateArea
  },
  filters: {
    rate(val) {
      let rval = ''
      rval = (val * 100).toFixed(2)
      return rval + '%'
    }
  },
  data() {
    return {
      dateRangeValue: [],
      table: [],
      loading: false,
      fileLoading: false,
      /* queryParams: {
          beginDate: '',
          endDate: '',
          reportType: 1
        },*/
      queryParams: {
        deptId: '',
        haveOld: 0
      },
      href: '',
      businessDivisions: [],
      selectBusinessDivisions: [],
      checkState: {
        dialogVisible: false,
        buildingId: '',
        checkTableId: ''
      },
      /* 基础工程 工序执行情况 */
      beExecuteState: {
        deptIds: [],
        isOld: 0,
        loading: false,
        data: []
      }
    }
  },
  created() {
    // const today = parseTime(new Date(), '{y}-{m}-{d}')
    // const preDate = parseTime(new Date().setFullYear((new Date().getFullYear() - 1)), '{y}-{m}-{d}')
    // this.queryParams.beginDate = preDate
    // this.queryParams.endDate = today
    // this.dateRangeValue = [preDate, today]
    // this.init()
    getBusinessDivision().then(res => {
      this.businessDivisions = []
      if (res && res.code === 200) {
        this.businessDivisions = res.data
      }
    })
  },
  methods: {
    selectChangeHandle(val = []) {
      this.queryParams.deptId = ''
      if (val.length > 0) {
        this.queryParams.deptId = val.join(',')
      }
    },
    getDept(dept) {
      this.queryParams.fid = dept.id
      this.query()
    },
    query() {
      if (!this.queryParams.deptId) {
        this.$message.warning('请选择事业部')
        return
      }
      this.loading = true
      this.table = []
      getKeyProcessExecution(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 下载文件
    downloadFile() {
      if (!this.queryParams.deptId) {
        this.$message.warning('请选择事业部')
        return
      }
      this.fileLoading = true
      downloadProcessExecuteExcel(this.queryParams).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同关键工序执行情况统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    // 下载文件
    downloadBeFile() {
      const beExecuteState = this.beExecuteState
      if (beExecuteState.deptIds.length === 0) {
        this.$message.warning('请选择事业部')
        return
      }
      this.fileLoading = true
      beExecuteState.deptId = beExecuteState.deptIds.join(',')
      downloadBeProcessExecuteExcel({ deptId: beExecuteState.deptIds.join(','), haveOld: beExecuteState.haveOld }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同关键工序执行情况统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange(val) {
      console.log(val)
      this.queryParams.beginDate = val[0]
      this.queryParams.endDate = val[1]
      this.query()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const cellData = row[column.property]
      if (cellData instanceof Object) {
        return {
          rowspan: cellData.rowspan,
          colspan: 1
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    },
    /* 获取验收情况平面图 */
    getCheckStateDialog(buildingId, checkTableId) {
      this.checkState.buildingId = buildingId
      this.checkState.checkTableId = checkTableId
      this.checkState.dialogVisible = true
    },
    /* 基础工程 - 工序执行情况 */
    queryBeExecute() {
      if (!this.beExecuteState.deptIds.length) {
        this.$message.warning('请选择事业部')
        return
      }
      this.beExecuteState.loading = true
      this.beExecuteState.data = []
      getBeKeyProcessExecution({ 'deptIds': this.beExecuteState.deptIds.join(','), 'isOld': this.beExecuteState.isOld }).then(
        (response) => {
          if (response.code === 200) {
            this.beExecuteState.data = response.data
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.beExecuteState.loading = false
        }, 200)
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    padding: 20px;

    .search-header {
      margin: 10px 0;
      display: flex;

      .oprate-btn {
        margin-left: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .table-href {
    text-decoration: underline;
    color: #409EFF;
  }
</style>
